import {Component} from 'react'

class ComSmall extends Component {
  // 在构造函数中，想要使用props，需要作为参数传入
  constructor(props) {
    super(props);
    this.state = {
      msg: '来自子组件的信息'
      // xxx: this.props.xxx
    }
    console.log(this.props);
  }

  render() {
    // 单向数据流
    // this.props.info2 += 1; read only property  数据只能是父传子，子组件不能修改父组件的值
    console.log(this.props);
    let {info1, info2, info3} = this.props;
    // state和props的区别：1. state是组件内部的数据，props是外部传进来的数据；2.state可以通过setState进行修改，props是只读属性，不能修改 
    // state和props的相同点：他们都可以存放数据，而且都可以引起组件的渲染
    return (<div>
      <p>我是子组件</p>
      <p>{info1}</p>
      <p>{info2}</p>
      <button onClick={()=>info3(this.state.msg)}>触发子传父</button>
    </div>)
  }
}
export default ComSmall